<template>
  <div class="app-container">
    <split-pane split="vertical" :default-percent="20">
      <template slot="paneL">
        <el-scrollbar wrapClass="scrollbar-wrapper">
          <div class="tree">
            <el-tree
              @node-click="handleNodeClick"
              ref="vuetree"
              :check-strictly="true"
              highlight-current
              check-on-click-node
              node-key="UUID"
              default-expand-all
              :data="data"
              :props="defaultProps"
            ></el-tree>
          </div>
        </el-scrollbar>
      </template>
      <template slot="paneR" :default-percent="70">
        <div class="right-detail" ref="flexDiv">
          <div class="top-type" ref="flexTable">
            <div class="btn-area">
              <el-button
                class="btn"
                plain
                type="primary"
                @click="addRefType"
                :disabled="typeAddDisabled"
              >新增菜单</el-button>
              <el-button
                class="btn"
                plain
                type="primary"
                @click="editRefType"
                :disabled="typeEditDisabled"
              >编辑菜单</el-button>
              <el-button
                class="btn"
                plain
                type="primary"
                @click="delRefType"
                :disabled="typeDelDisabled"
              >删除菜单</el-button>
            </div>
            <fieldset>
              <legend style="font-size: 1.5rem;">菜单信息</legend>
              <el-form label-position="right" size="mini" label-width="11rem" :model="currentType">
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="菜单序号：">
                      <span>{{ currentType.mdlSeq }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="菜单代码：">
                      <span>{{ currentType.mdlCode }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="菜单名称：">
                      <span>{{ currentType.mdlName }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24" style="word-break:break-all;">
                    <el-form-item label="URL地址：">
                      <span>{{ currentType.mdlUrl }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="是否平台菜单：">
                      <el-checkbox
                        v-model="currentType.mdlIsp"
                        true-label="Y"
                        false-label="N"
                        disabled
                      ></el-checkbox>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="是否可用：">
                      <el-checkbox v-model="currentType.mdlIsp" true-label="Y" false-label="N"></el-checkbox>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </fieldset>
          </div>
          <div class="bottom-code">
            <div class="flex-table">
              <div class="inner">
                <fieldset style="min-width:95%;">
                  <legend style="font-size: 1.5rem;">功能列表</legend>
                  <el-table
                    :data="currentType.moduleChildrenGrand"
                    :height="maxHeight"
                    highlight-current-row
                    @row-click="getCurrentCodeRow"
                    :header-cell-style="{ textAlign: 'center' }"
                    border
                  >
                    <el-table-column prop="mdlSeq" align="center" width="70" label="序号"></el-table-column>
                    <!--绑定中英文  -->
                    <el-table-column prop="mdlCode" show-overflow-tooltip align="left" label="功能代码"></el-table-column>
                    <el-table-column prop="mdlName" show-overflow-tooltip align="left" label="功能名称"></el-table-column>
                    <el-table-column label="是否可用" align="center">
                      <template slot-scope="scope">
                        <el-checkbox
                          v-model="scope.row.mdlValid"
                          true-label="Y"
                          false-label="N"
                          :key="scope.$index"
                          disabled
                        ></el-checkbox>
                      </template>
                    </el-table-column>
                  </el-table>
                </fieldset>
              </div>
            </div>
          </div>
        </div>
      </template>
    </split-pane>

    <!-- 代码分类dialog -->
    <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      v-el-drag-dialog
      :title="$t(TypeMap[TypeDialogStatus])"
      :visible.sync="RefTypeDialogVisible"
      v-if="RefTypeDialogVisible"
      :before-close="handleTypeDialogClose"
    >
      <el-form
        label-position="right"
        :model="RefTypeData"
        ref="RefTypeData"
        :rules="RefTypeDataRules"
        label-width="12rem"
        size="mini"
      >
        <fieldset>
          <legend style="font-size: 1.5rem;">菜单信息</legend>
          <el-row>
            <el-col :span="12">
              <el-form-item prop="mdlSeq" label="菜单序号：">
                <el-input
                  v-model="RefTypeData.mdlSeq"
                  maxlength="4"
                  @keyup.native="checkCode"
                  :disabled="inputDisabled"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item prop="mdlCode" label="菜单代码：">
                <el-input
                  v-model="RefTypeData.mdlCode"
                  maxlength="16"
                  placeholder="请输入英文字母"
                  @keyup.native="checkCode"
                  :disabled="inputDisabled"
                  @change="uppercase('mdlCode')"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item prop="mdlLevel" label="菜单等级：">
                <el-select v-model="RefTypeData.mdlLevel" filterable clearable disabled>
                  <el-option
                    v-for="item in levelList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item prop="mdlName" label="菜单名称：">
                <el-input v-model="RefTypeData.mdlName" :disabled="inputDisabled" maxlength="32"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item prop="mdlUrl" label="URL地址：">
                <el-input v-model="RefTypeData.mdlUrl" :disabled="inputDisabled" maxlength="150"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item prop="mdlIsp" label="是否平台菜单：">
                <el-checkbox
                  v-model="RefTypeData.mdlIsp"
                  :disabled="inputDisabled"
                  true-label="Y"
                  false-label="N"
                ></el-checkbox>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item prop="mdlValid" label="是否可用：">
                <el-checkbox
                  v-model="RefTypeData.mdlValid"
                  :disabled="inputDisabled"
                  true-label="Y"
                  false-label="N"
                ></el-checkbox>
              </el-form-item>
            </el-col>
          </el-row>
        </fieldset>
        <el-button
          class="btn"
          style="margin-top:1rem"
          plain
          type="primary"
          :disabled="isSecond"
          @click="addRefCode"
        >新增功能</el-button>
        <fieldset class="tableStyle">
          <legend style="font-size: 1.5rem;">功能列表</legend>
          <el-table
            cell-class-name="cell-form"
            size="mini"
            :data="RefTypeData.moduleChildrenGrand"
            border
            style="width: 100%"
            highlight-current-row
            :header-cell-style="{ textAlign: 'center' }"
          >
            <el-table-column
              show-overflow-tooltip
              label-class-name=" "
              label="序号"
              width="100"
              align="center"
              prop="mdlSeq"
            >
              <template slot-scope="scope">
                <el-form-item
                  class="table-form"
                  :prop="'moduleChildrenGrand.' + scope.$index + '.mdlSeq'"
                  :rules="RefCodeDataRules.mdlSeq"
                  label-width="0px"
                >
                  <el-input
                    :title="scope.row.mdlSeq"
                    size="mini"
                    v-model="scope.row.mdlSeq"
                    @keyup.native="checkChildrenCode(scope.$index)"
                  ></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              label-class-name="title"
              prop="mdlCode"
              label="功能代码"
              min-width="180"
              align="left"
            >
              <template slot-scope="scope">
                <el-form-item
                  class="table-form"
                  :prop="'moduleChildrenGrand.' + scope.$index + '.mdlCode'"
                  :rules="RefCodeDataRules.mdlCode"
                  label-width="0px"
                >
                  <el-input
                    size="mini"
                    :title="scope.row.mdlCode"
                    v-model="scope.row.mdlCode"
                    placeholder="请输入英文字母"
                    @keyup.native="checkChildrenCode(scope.$index)"
                    @change="upperChildCase(scope.$index)"
                  ></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              label-class-name="title"
              prop="mdlName"
              label="功能名称"
              min-width="180"
              align="left"
            >
              <template slot-scope="scope">
                <el-form-item
                  class="table-form"
                  :prop="'moduleChildrenGrand.' + scope.$index + '.mdlName'"
                  :rules="RefCodeDataRules.mdlName"
                  label-width="0px"
                >
                  <el-input size="mini" v-model="scope.row.mdlName"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column show-overflow-tooltip label="是否可用" width="140" align="center">
              <template slot-scope="scope">
                <el-form-item class="table-form" label-width="0px">
                  <el-checkbox
                    v-model="scope.row.mdlValid"
                    true-label="Y"
                    false-label="N"
                    :key="scope.$index"
                  ></el-checkbox>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              :label="$t('message.operation')"
              min-width="100"
              align="center"
            >
              <template slot-scope="scope">
                <el-form-item class="table-form" label-width="0px">
                  <span
                    class="el-tag el-tag--danger el-tag--mini"
                    style="cursor: pointer;"
                    @click="delRefCode(scope.row, scope.$index)"
                    v-show="!isChange"
                  >删除</span>
                </el-form-item>
              </template>
            </el-table-column>
          </el-table>
        </fieldset>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button class="btn" @click="handleTypeDialogClose">关闭</el-button>
        <el-button class="btn" type="primary" @click="commitType">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  checkSysList,
  // checkInfoList,
  editInfoList,
  delInfoList,
  addInfoList
} from '@/request/api'
import { toString } from '@/utils/utils'
import resizeMixin from '@/mixins/resize'
export default {
  name: 'router.sysmodule',
  mixins: [resizeMixin],
  data() {
    return {
      isChange: true,
      maxHeight: -1,
      data: [
        {
          father: '',
          RV_REFERRED: '菜单',
          moduleChildrenGrand: []
        }
      ],
      defaultProps: {
        label: 'mdlName',
        children: 'moduleChildren'
      },
      TypeMap: {
        updateType: 'baseCode.editClassify',
        createType: 'baseCode.addClassify'
      },
      CodeMap: {
        updateCode: 'baseCode.editCode',
        createCode: 'baseCode.addCode'
      },
      levelList: [
        { label: '一级菜单', value: '1' },
        { label: '二级菜单', value: '2' }
      ], // 菜单等级
      isSecond: true,
      inputDisabled: false,
      // 按钮是否可用的状态
      typeAddDisabled: true,
      typeEditDisabled: true,
      typeDelDisabled: true,
      CodeAddDisabled: true,
      CodeEditDisabled: true,
      CodeDelDisabled: true,
      //
      TypeDialogStatus: '',
      CodeDialogStatus: '',
      currentNode: {},
      currentType: {},
      codeNum: 0,
      currentCodeList: [],
      currentCode: {},
      RefTypeDialogVisible: false, // 代码分类 Dialog
      RefCodeDialogVisible: false, // 基础代码 Dialog
      // 最新添加的代码分类的RV_DOMAIN 通过这个判断是否最新添加的代码分类并高亮显示
      lastRefTypeRV_DOMAIN: '',
      // 代码分类
      RefTypeData: {}, // 代码分类 dialog内的form
      RefTypeDataRules: {
        mdlSeq: [
          { required: true, message: '请填写菜单序号', trigger: 'blur' }
          // { min: 1, max: 4, message: '至多输入4个字符', trigger: 'blur' }
        ],
        mdlCode: [
          { required: true, message: '请填写菜单代码', trigger: 'blur' },
          { min: 1, max: 16, message: '至多输入16个字符', trigger: 'blur' }
        ],
        mdlName: [
          { required: true, message: '请填写菜单名称', trigger: 'blur' },
          { min: 1, max: 32, message: '至多输入32个字符', trigger: 'blur' }
        ],
        mdlUrl: [
          { min: 1, max: 150, message: '至多输入150个字符', trigger: 'blur' }
        ]
      },
      RefCodeDataRules: {
        mdlSeq: [
          { required: true, message: '请填写序号', trigger: 'blur' }
          // { min: 1, max: 4, message: '至多输入4个字符', trigger: 'blur' }
        ],
        mdlCode: [
          { required: true, message: '请填写功能代码', trigger: 'blur' }
          // { min: 1, max: 16, message: '至多输入16个字符', trigger: 'blur' }
        ],
        mdlName: [
          { required: true, message: '请填写功能名称', trigger: 'blur' }
          // { min: 1, max: 32, message: '至多输入32个字符', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {},
  beforeMount() {
    this.getRefTypeList()
  },
  methods: {
    checkCode() {
      this.RefTypeData.mdlCode = this.RefTypeData.mdlCode.replace(
        /[^a-zA-Z]/g,
        ''
      )
      this.RefTypeData.mdlSeq = this.RefTypeData.mdlSeq.replace(/[^0-9]/g, '')
    },
    checkChildrenCode(key) {
      this.RefTypeData.moduleChildrenGrand[
        key
      ].mdlSeq = this.RefTypeData.moduleChildrenGrand[key].mdlSeq.replace(
        /[^0-9]/g,
        ''
      )
      this.RefTypeData.moduleChildrenGrand[
        key
      ].mdlCode = this.RefTypeData.moduleChildrenGrand[key].mdlCode.replace(
        /[^a-zA-Z]/g,
        ''
      )
    },
    uppercase(key) {
      this.RefTypeData[key] = this.RefTypeData[key].toUpperCase()
    },
    upperChildCase() {},
    resetTree() {
      this.$nextTick(() => {
        this.$refs.vuetree.setCheckedNodes([
          this.data[0].moduleChildrenGrand[0]
        ])
      })
    },
    // 获取代码分类树
    getRefTypeList() {
      checkSysList().then(response => {
        if (response.success == 1) {
          this.data = response.data
        }
        this.typeAddDisabled = false // 初始化完成，新增按钮可用
      })
    },
    // 树节点的点击事件
    handleNodeClick(data) {
      this.currentType = data
      if (data.mdlLevel == null) {
        this.typeEditDisabled = true
        this.typeDelDisabled = true
        return
      } else if (data.mdlLevel == '1') {
        this.typeAddDisabled = false
        this.typeEditDisabled = false
        this.typeDelDisabled = false
      } else if (data.mdlLevel == '2') {
        this.typeAddDisabled = true
        this.typeEditDisabled = false
        this.typeDelDisabled = false
      }
      this.currentNode = data

      // this.getRefType(this.currentNode)
    },
    // 点击基础代码表格的一行，获取到当前行的数据
    getCurrentCodeRow(row) {
      this.currentCode = row
      this.CodeAddDisabled = false
      this.CodeEditDisabled = false
      this.CodeDelDisabled = false
    },
    // 代码分类 -- 添加
    addRefType() {
      this.codeNum = 0
      this.TypeDialogStatus = 'createType'
      if (this.currentType.mdlName == '平台菜单') {
        this.resetRefType()
        this.RefTypeData.mdlLevel = '1'
        this.isSecond = true
        this.inputDisabled = false
      } else if (this.currentType.mdlLevel == '1') {
        this.resetRefType()
        this.RefTypeData.mdlLevel = '2'
        this.isSecond = false
        this.inputDisabled = false
      } else if (this.currentType.mdlLevel == '2') {
        this.RefTypeData = this.currentType
        this.isSecond = false
        this.inputDisabled = true
      }
      this.RefTypeDialogVisible = true
    },
    // 代码分类 -- 编辑
    editRefType() {
      this.isChange = false
      this.isSecond = false
      this.TypeDialogStatus = 'updateType'
      this.RefTypeDialogVisible = true
      this.currentType.sysModuleList = this.currentType.moduleChildrenGrand
      this.RefTypeData = Object.assign({}, this.currentType)
    },
    // 代码分类 -- 删除
    delRefType() {
      this.$confirm('你确定要删除此数据吗？', {
        closeOnClickModal: false
      })
        .then(() => {
          this.commitDelType(this.currentType)
        })
        .catch(() => {})
    },
    // 代码分类 -- 确认删除
    commitDelType(data) {
      delInfoList(data).then(() => {
        this.$message.success({ message: '删除分类成功！' })
        // 删除成功，页面变为重置状态
        this.getRefTypeList()
        this.currentType = {}
        this.currentCodeList = []
        this.typeAddDisabled = false
        this.typeEditDisabled = true
        this.typeDelDisabled = true
        this.CodeAddDisabled = true
        this.CodeEditDisabled = true
        this.CodeDelDisabled = true
      })
    },
    // 代码分类的dialog  先判断是 提交 or 编辑
    commitType() {
      this.$refs['RefTypeData'].validate(valid => {
        if (!valid) {
          return false
        }
        if (this.TypeDialogStatus == 'updateType') {
          this.commitEditType(this.RefTypeData)
        } else if (this.TypeDialogStatus == 'createType') {
          this.commitAddType(this.RefTypeData)
        }
      })
    },
    // 代码分类 -- 编辑--的form表单
    commitEditType(formdata) {
      console.log(formdata)
      editInfoList(formdata).then(res => {
        if (res.success == 1) {
          this.$message.success({ message: '编辑成功！' })
          this.getRefTypeList()
          this.currentType = {}
          this.currentCodeList = []
          this.typeAddDisabled = false
          this.typeEditDisabled = true
          this.typeDelDisabled = true
          this.RefTypeDialogVisible = false
        }
      })
    },
    // 代码分类 -- 添加--的form表单
    commitAddType(formdata) {
      formdata.sysModuleList = formdata.moduleChildrenGrand
      formdata.mdlParent = this.currentType.mdlCode
      console.log(formdata)
      addInfoList(formdata).then(res => {
        if (res.success == 1) {
          this.$message.success({ message: '新增分类成功！' })
          // this.lastRefTypeRV_DOMAIN = formdata.RV_DOMAIN
          this.getRefTypeList()
          this.RefTypeDialogVisible = false
        }
      })
    },

    // 基础代码 -- 添加
    addRefCode() {
      this.CodeDialogStatus = 'createCode'
      this.resetRefCode()
    },

    // 功能列表数据 -- 删除
    delRefCode(row, index) {
      this.$confirm('你确定要删除此数据吗？', {
        closeOnClickModal: false
      })
        .then(() => {
          console.log(row)
          if (row.mdlId) {
            this.commitDelType(row)
            this.RefTypeData.moduleChildrenGrand.splice(index, 1)
            for (let i in this.RefTypeData.moduleChildrenGrand) {
              this.$set(
                this.RefTypeData.moduleChildrenGrand[i],
                'mdlSeq',
                toString(Number(i) + 1)
              )
            }
          } else {
            this.RefTypeData.moduleChildrenGrand.splice(index, 1)
            for (let i in this.RefTypeData.moduleChildrenGrand) {
              this.$set(
                this.RefTypeData.moduleChildrenGrand[i],
                'mdlSeq',
                toString(Number(i) + 1)
              )
            }
          }
        })
        .catch(() => {})
    },

    handleTypeDialogClose() {
      this.$confirm('当前编辑信息未保存，是否保存？', {
        distinguishCancelAndClose: true,
        confirmButtonText: '是',
        cancelButtonText: '否',
        closeOnClickModal: false
      })
        .then(() => {
          this.commitType()
        })
        .catch(() => {
          this.RefTypeDialogVisible = false
        })
    },

    // restet 代码分类
    resetRefType() {
      return (this.RefTypeData = {
        mdlSeq: '0',
        mdlCode: '',
        mdlName: '',
        mdlUrl: '',
        mdlIsp: 'Y',
        mdlValid: 'Y',
        mdlType: 'M',
        moduleChildrenGrand: []
      })
    },
    resetRefCode() {
      this.codeNum = this.RefTypeData.moduleChildrenGrand.length + 1
      this.isChange = false
      return this.RefTypeData['moduleChildrenGrand'].push({
        mdlName: '',
        mdlCode: '',
        mdlSeq: toString(this.codeNum),
        mdlType: 'B',
        mdlValid: 'Y'
      })
    }
  },
  created() {
    this.resize = () => {
      this.maxHeight =
        this.$refs.flexDiv.offsetHeight -
        this.$refs.flexTable.offsetHeight -
        105
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  overflow: hidden;
  background-color: #fff;
  position: relative;
  height: 100%;
}
.tree {
  padding-right: 20px;
  font-size: 1.4rem;
}
.right-detail {
  padding-left: 50px;
  height: 100%;
  position: relative;
  padding-top: 25px;
  .bottom-code {
    height: 70%;
    margin-top: 3%;
    display: flex;
    flex-direction: column;
    .flex-table {
      flex: 0%;
      width: 100%;
      overflow: hidden;
      .inner {
        height: 100%;
        width: 100%;
        overflow: hidden;
      }
    }
    .btn-area {
      flex: none;
    }
  }
  .top-type {
    box-sizing: border-box;
    min-height: 30%;
    width: 100%;
    overflow: auto;
    table {
      max-width: 100%;
      font-size: 1.4rem;
      td {
        min-width: 170px;
        line-height: 3rem;
        padding-right: 3rem;
      }
    }
  }
}
.btn {
  min-width: 80px;
  padding: 0 20px;
  height: 28px;
}
.el-table-add-row {
  margin-top: 10px;
  width: 100%;
  height: 34px;
  border: 1px dashed #c1c1cd;
  border-radius: 3px;
  cursor: pointer;
  justify-content: center;
  display: flex;
  line-height: 34px;
}
.title {
  :before {
    content: "*";
    color: #f56c6c;
  }
}
.tableStyle {
  .el-table {
    .el-table__body-wrapper
      .el-table__body
      .el-table__row
      tr
      td
      .el-form-item__content
      .el-form-item__error {
      position: relative;
      padding-top: 0px;
    }
  }
}
.cell-form {
  .cell {
    overflow: inherit;
  }
}
</style>
